<html>

<head>
<title>jQuery Tech Day</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script language="javascript" src="scripts/jquery-1.3.2.js"></script>

<script language="javascript">
	$(setExternalStyles);
	$(replaceWebUrlElements);

	function setExternalStyles()
	{
		$("a[href^=http://]").addClass("extLink").attr("target", "_blank");
	}
	
	function replaceWebUrlElements()
	{
		$("#content a[href^=http://]").each( function(idx)
		{
			var html = this.innerHTML;
			// scrub the http:// prefix.
			var rep = html.replace("http://", "");
			
			// check for & scrub the www.
			if (rep.substr(0, 4).toLowerCase() == "www.")
				rep = rep.slice(4, rep.length);
			
			this.innerHTML = removeDotSuffix(rep);
		});
		
		function removeDotSuffix(url)
		{
			var suffixes = new Array(".com", ".co.uk", ".org"); // this can go on forever.
			
			for (idx in suffixes)
			{
				var currSuffix = suffixes[idx];
				
				if (url.substr(url.length - currSuffix.length, currSuffix.length) == currSuffix)
				{
					var rtn = url.slice(0, url.length - currSuffix.length);
					return rtn;
				}
			}
			return url;
		}
	}
</script>

</head>

<body>
	<div id="wrapper">
		<div id="banner">
			<h1>jQuery Tech Day</h1>
		</div>
		
		<div id="sideNav">
			<h2>Some Links..</h2>
			<ul>
				<li><a href="http://www.google.co.uk">Google</a></li>
				<li><a href="http://stackoverflow.com">StackOverflow</a></li>
				<li><a href="http://www.dilbert.com">Dilbert</a></li>
				<li><a href="http://thedailywtf.com">TDWTF</a></li>
				<li><a href="http://www.dofactory.com">Data & Object Factory</a></li>
			</ul>
		</div>
		
		<div id="content">
			<h2>Lab 03 - All Your Text Are Belong to ME!</h2>
			
			<p>
				Now lets see if we can clean up the text that is presented to the user.
				
				The links below actually have the full address within the &lt;a&gt; tags within the markup (right click, "View Source" and see for yourself).
			</p>
			
			<ul class="noBullet">
				<li><a href="http://google.co.uk">http://google.co.uk</a></li>
				<li><a href="http://stackoverflow.com">http://stackoverflow.com</a></li>
				<li><a href="http://www.robcthegeek.com">http://www.robcthegeek.com</a></li>
			</ul>
			
			<div>
				<a href="index.html">Back to Index</a>
			</div>
		</div>
		
		<div id="footer">
			Robert Cooper (<a href="http://twitter.com/robcthegeek">@robcthegeek</a>) from <a href="http://robcthegeek.com">robcthegeek.com</a>
		</div>
	</div>
</body>
</html>